<template>
  <div>
    <Echart
        :options="options"
        id="centreLeft1Chart"
        height="200px"
        width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
import * as  echarts from "echarts";

export default {
  data() {
    return {
      options: {},
      // 定义颜色
      colorList: {
        linearYtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#f5b44d'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        linearGtoB: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#43dfa2'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        linearBtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#1c98e8'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        areaBtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(35,184,210,.2)'
            },
            {
              offset: 1,
              color: 'rgba(35,184,210,0)'
            }
          ]
        }
      }
    }
  },
  components: {
    Echart
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    cdata: {
      handler() {
        this.options = {
          // backgroundColor: '#000',
          tooltip: {
            // show: false // 弹层数据去掉
          },
          grid: {
            left: '30%',
            // right: '4%',
            // bottom: '3%',
            top: "30%",
            // containLabel: true
          },
          legend: {
            // show: true
            orient: 'vertical',
            left: 20,
            top: 50,
            textStyle: {
              fontSize: 12,
              color: '#ffff'
            },
          },
          radar: {
            center: ['50%', '50%'], // 外圆的位置
            radius: '70%',
            axisName: {
              name: {
                color: '#fff',
                fontSize: 12,
                fontWeight: 400,
              },
            },
            // TODO:
            indicator: [
              {
                name: '未完成',
              },
              {
                name: '已结束',
              }
            ],
            splitArea: {
              // 坐标轴在 grid 区域中的分隔区域，默认不显示。
              show: true,
              areaStyle: {
                // 分隔区域的样式设置。
                color: ['#1c2330'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
              }
            },
            axisLine: {
              // 指向外圈文本的分隔线样式
              lineStyle: {
                color: 'rgba(255,255,255,0.7)'
              }
            },
            splitLine: {
              lineStyle: {
                type: 'solid',
                color: '#1781BA', // 分隔线颜色
                width: 1 // 分隔线线宽
              }
            }
          },
          series: [{
            type: 'radar',
            symbolSize: 5,
            symbol: "circle",
            data: [{
              // TODO:
              value: [80, 30],
              name: '维修工单',
              areaStyle: {
                color: "#39B2FF",
                opacity: 0.3
              },
              lineStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00A2FF'
                }, {
                  offset: 1,
                  color: '#0060FF'
                }], false),
                width: 1
              },
              color: "#81B8CC ",
              borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#00DEFF'
              }, {
                offset: 1,
                color: '#1598FF'
              }], false),
              borderWidth: 0.5,
              opacity: 1
              // },
            }]
          }, {
            type: 'radar',
            symbolSize: 5,
            symbol: "circle",
            data: [{
              // TODO:
              value: [20, 50],
              name: '保养工单',
              areaStyle: {
                color: "#c9ae1b",
                opacity: 0.3
              },
              lineStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00A2FF'
                }, {
                  offset: 1,
                  color: '#0060FF'
                }], false),
                width: 1
              },
              color: "#81B8CC ",
              borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#acaf48'
              }, {
                offset: 1,
                color: '#c9ae1b'
              }], false),
              borderWidth: 0.5,
              opacity: 1
              // },
            }]
          }]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
